<template>
  <intro-view :usage="usage">
    <ui-scroll direction="horizontal" style="height: 80px; background: #999">
      <div style="display: inline-block; width: 200px">1</div>
      <div style="display: inline-block; width: 200px">2</div>
      <div style="display: inline-block; width: 200px">3</div>
      <div style="display: inline-block; width: 200px">4</div>
      <div style="display: inline-block; width: 200px">5</div>
      <div style="display: inline-block; width: 200px">6</div>
      <div style="display: inline-block; width: 200px">7</div>
    </ui-scroll>
    <ui-scroll enableRefresh @refresh="refreshData" enableLoadMore  @loadMore="loadMoreData" ref="bScrollRef" style="height: 500px">
      <!--<div slot="top-static" @click="testClick">hello test</div>-->
      <div slot="blankView">我是blankView</div>
      <ul slot="beforeScrollTopFixed">
        <li style="border-bottom: 1px solid red; min-height: 44px" @click="testClick">b1</li>
        <li style="border-bottom: 1px solid red; min-height: 44px">b2</li>
        <li style="border-bottom: 1px solid red; min-height: 44px">b3</li>
        <li style="border-bottom: 1px solid red; min-height: 44px">b4</li>
      </ul>
      <div slot="scrollTopFixed">
        <div>scrollTopFixed============吸附在顶部=====</div>
      </div>
      <ul>
        <li v-for="(num, index) in items" style="border-bottom: 1px solid red; min-height: 44px" :key="index">{{num}}</li>
      </ul>
      <div slot="scrollBottomFixed">
        <div>scrollBottomFixed==========吸附在底部=======</div>
      </div>
      <ul slot="afterScrollBottomFixed">
        <li style="border-bottom: 1px solid red; min-height: 44px">a1</li>
        <li style="border-bottom: 1px solid red; min-height: 44px">a2</li>
        <li style="border-bottom: 1px solid red; min-height: 44px">a3</li>
        <li style="border-bottom: 1px solid red; min-height: 44px">a4</li>
      </ul>
    </ui-scroll>
  </intro-view>
</template>

<script>
  import usage from './usage.md'
  export default {
    data () {
      return {
        usage,
        items: []
      }
    },
    methods: {
      refreshData () {
        // this.$refs['bScrollRef'].disable()
        setTimeout(() => {
          this.items = [11, 2, 3, 4, 5, 6, 7, 8, 9, 10]
          this.$refs['bScrollRef'].stopLoading(true)
          // this.$refs['bScrollRef'].enable()
          this.$refs['bScrollRef'].changeBlankViewStatus(this.items.length == 0)
        }, 3000)
      },
      loadMoreData () {
        setTimeout(() => {
          this.items = this.items.concat([11, 12, 13, 14, 15, 16, 17, 18, 19, 20])
          this.$refs['bScrollRef'].stopLoading(this.items.length > 45 ? false : true)
          /* eslint-disable */
          console.log(`items count: ${this.items.length}`)
        }, 3000)
      },
      testClick() {
        console.log(1)
      }
    },
    mounted () {
      this.$refs['bScrollRef'].autoPullDownRefresh()
    }
  }
</script>
